<template>
  <div class="file-content el-row--flex">
    <div class="header el-row--flex flex-between p-2">
      <div class="left">
        <el-input
          size="small"
          v-model="query.keyword">
          <template slot="append">
            <el-button size="mini" @click="search">搜索</el-button>
          </template>
        </el-input>
      </div>
      <div class="right">
        <el-button
          type="primary"
          size="small"
          @click="addFile"
        >小说上传
        </el-button>
        <el-button
          size="small"
          @click="delList"
        >批量删除
        </el-button>
      </div>
    </div>
    <div class="content flex-1 p-l-2 p-r-2">
      <el-table
        :data="tableData"
        border
        @selection-change="selectChange"
      >
        <el-table-column
          type="selection"
        />
        <el-table-column
          prop="UserID"
          label="小说编号"
        />
        <el-table-column
          prop="UserName"
          label="小说名称"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="showFile(scope.row)">{{ scope.row.UserName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="BookID"
          label="作者"
        />
        <el-table-column
          prop="BookName"
          label="状态"
        />
        <el-table-column
          prop="UserAccount"
          label="类型"
        />
        <el-table-column
          prop="UserAccount"
          label="文件地址"
        />
        <el-table-column
          prop="UserVip"
          label="是否Vip"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    查看文件详情的抽屉-->
    <el-drawer
      class="user-drawer"
      :visible.sync="drawVisible"
      :title="details.BookName"
    >
      <table class="m-2 user-table">
        <tr>
          <td class="text-left">小说图片：</td>
          <td class="m-r">
            <el-image style="width: 60px;height: 60px;display: inline;" :src="details.BookImg"/>
          </td>
        </tr>
        <tr>
          <td class="text-left">小说名称：</td>
          <td>{{ details.BookName }}</td>
        </tr>
        <tr>
          <td class="text-left">小说类型：</td>
          <td>{{details.xs_Type.TypeName}}</td>
        </tr>
        <tr>
          <td class="text-left">小说状态：</td>
          <td>{{details.xs_Type.TypeName}}</td>
        </tr>
      </table>
    </el-drawer>
    <book-upload-dialog
      :visible="uploadVisible"
      @success="upLoadSuccess"
    />
  </div>
</template>

<script>
import BookUploadDialog from "@/components/dialog/BookUploadDialog";
export default {
  name:"fiction",
  components: {BookUploadDialog},
  layout:'base',
  data(){
    return{
      tableData:[],
      query:{
        keyword:''
      },
      selectFiles:[],
      detailsVisible:false, //控制详情抽屉的弹出状态
      details:{},
      uploadVisible:false,
      drawVisible:false
    }
  },
  methods:{
    /**
     * 搜索
     */
    search(){
      this.$axios.$get('http://localhost:8001/files/search?keywork=' + this.query.keyword)
        .then(res => {
          this.tableData = res
        })
        .catch(error => {
          this.$message.error('查询失败，请联系管理员！')
          console.log(error)
        })
    },
    /**
     * 小说上传
     */
    addFile(){
      this.uploadVisible = true
    },
    upLoadSuccess(){
      this.search()//调用搜索的方法刷新列表数据
    },
    /**
     * 批量删除
     */
    delList(){

    },
    /**
     * 表格多选监听
     * @param val
     */
    selectChange(val){
      this.selectFiles = val
    },
    /**
     * 显示文件详情
     * @param row
     */
    showFile(row){

    },
    /**
     * 修改文件信息
     * @param row
     */
    edit(row){

    },
    /**
     * 删除文件信息
     * @param row
     */
    del(row){

    }
  },
  created(){
    //初始化表格数据
    this.$axios.$get('http://localhost:8001/files/getAllBook')
      .then(res => {
        this.tableData = res
      })
      .catch(error => {
        this.$message.error("文件列表获取失败！")
        console.log(error)
      })
  }
}
</script>

<style lang="less">
.file-content{
  flex-direction: column;
}
</style>
